<template>
	<view class="customerDetail" @click="bodyClick()">
		<u-navbar safeAreaInsetTop fixed placeholder bgColor='#1f2f3d' autoBack leftIconColor='#fff'>
			<view slot="right" class="textTitle" @click.stop="showNameClick">

				<u-icon name="more-dot-fill" color="#fff"></u-icon>
				<view class="popupClass" v-if="showName">
					<view class="modal-ang"></view>
					<view class="modal-item" @click="showNo">
						置为无效
					</view>
				</view>
			</view>

		</u-navbar>
		<view class="content">
			<u--image class="imageClass" shape="circle" :src="src" width="120rpx" height="120rpx"></u--image>
			<view class="contentRight">
				<view class="top">
					<view class="store">刘海涛</view>
					<u-tag text="一般意向" size='mini' type="primary" class="activeClass" />
					<u-tag text="问询" size='mini' type="primary" />
				</view>
				<view class="centers">
					<view class="textName">18738161475</view>
					<u-tag text="来访客户" size='mini' type="info" />
				</view>
				<u--text text="投资" color='#909399'></u--text>
				<view class="bottom">

				</view>
			</view>
		</view>
		<view class="vmb-my-nav">

			<view class="space-layout">
				<view class="isCircle">
					<u-icon name="photo"></u-icon>
					<u--text text="投资" color='#909399'>收藏</u--text>
				</view>
				<view class="isCircle">
					<u-icon name="photo"></u-icon>
					<u--text text="投资" color='#909399'>收藏</u--text>
				</view>
				<view class="isCircle">
					<u-icon name="photo"></u-icon>
					<u--text text="投资" color='#909399'>收藏</u--text>
				</view>
				<view class="isCircle">
					<u-icon name="photo"></u-icon>
					<u--text text="投资" color='#909399'>收藏</u--text>
				</view>
			</view>


		</view>
		<u-sticky>
			<view class="tabsClass">
				<u-tabs :list="listTop" @click="click"></u-tabs>
			</view>
		</u-sticky>

		<view class="content-bottom">


			<record v-if="current==0"></record>
			<resource v-if="current==1"></resource>
			<questionnaire v-if="current==2"></questionnaire>

		</view>



	</view>
</template>

<script>
	import record from '@/components/customersThread/record.vue';
	import resource from '@/components/customersThread/resource.vue';
	import questionnaire from '@/components/customersThread/questionnaire.vue';
	export default {
		data() {

			return {
				showName: false,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				current: 0,
				listTop: [{
						name: '记录'
					},
					{
						name: '资料'
					},
					{
						name: '问卷'
					}
				],
			}
		},

		components: {
			record,
			resource,
			questionnaire
		},



		onPageScroll() {
			this.showName = false
		},
		methods: {
			bodyClick() {
				this.showName = false
			},
			showNameClick() {
				this.showName = !this.showName
			},
			click(e) {
				this.current = e.index
			},
			showNo() {
				console.log(222)
			}

		}
	}
</script>


<style lang="scss" scoped>
	.textTitle {
		position: relative;

		.popupClass {
			position: absolute;
			right: -5px;
			top: 22px;

			.modal-ang {
				position: absolute;
				background-color: #060607;
				width: 10px;
				height: 10px;
				top: -4px;
				right: 8px;
				transform: rotate(45deg);
				border-radius: 2px;
				z-index: 10;
			}

			.modal-item {
				background-color: #060607;
				width: 50px;
				padding: 7px;
				font-size: 12px;
				position: relative;
				color: #fff;
				flex: 1;
				z-index: 20;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tabsClass {
		padding: 20rpx 100rpx 40rpx;
		background-color: red;
	}

	.content-bottom {
		padding: 0 100rpx;
		background: #fff;
		padding-top: 50rpx;
	}

	.customerDetail {
		.vmb-my-nav {
			margin-left: auto;
			margin-right: auto;
			height: 150rpx;
			padding: 0 17px;
			margin-top: -80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.space-layout {
				background: #CED7E1;
				width: 100%;
				height: 150rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.isCircle {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}

			}

		}

		.content {
			height: 300rpx;
			background-color: #1f2f3d;
			padding-top: 40rpx;
			padding-left: 17px;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;

			.imageClass {
				margin-right: 13px;
			}

			.top {
				color: #fff;

				display: flex;
				align-items: center;

				.store {
					margin-right: 20rpx;
				}

				.activeClass {
					margin-right: 20rpx;

				}

			}

			.centers {
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				color: #fff;

				.textName {
					margin-right: 20rpx;
				}
			}

			.bottom {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				.isCircle {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					background-color: #1890FF;
					border-radius: 100%;
					margin-right: 50rpx;
				}
			}
		}
	}
</style>
